<template>
  <div class="home">
    <van-nav-bar title="审批待办" left-text="返回" left-arrow @click-left="returnBtn" />
    <div class="home-list" v-for="(item, index) in approveOrderTobeList" :key="item.id" @click="pproveOrderBtn(item.approveOrderId)">
      <span>{{ index + 1 }}</span>
      <van-highlight
        :keywords="keywords" 
        :source-string="item.approveOrderTobeContent" 
        highlight-class="custom-class" 
      />
    </div>
    
  </div>
</template>

<script setup>
import { ref } from 'vue'
import {parseTime} from "@/utils/ruoyi";
import { svc} from '@/config/common'
import useUserStore from '@/store/modules/user';
import { useRouter } from "vue-router";
import {getH5UserId} from "@/config/cookie";
import {doGet} from '@/config/http'
// import { showConfirmDialog } from 'vant';
  const today = parseTime(new Date().getTime(), '{y}-{m}-{d}');//new Date().pattern("yyyy年MM月dd日"),
  const router = useRouter();
  const userStore = useUserStore();
  console.log("userStore",userStore)
  let approveOrderTobeList = ref([])
  let keywords = ['-', '合同管理', '收支控制', '预算控制', '报账单', '事前申请单', '额度下达单', '调整单', '事前用款申请单', '二上预算编制', '一上预算编制', '主合同', '初始合同', '合同变更', '合同请款', '合同补充协议', '合同借阅', '合同验收', '合同中止', '合同终止']
  let currentUserId = getH5UserId()

  const getList = async () => {
    let  res = await doGet(svc, '/approve-order-tobe/page', {receiveUserId: currentUserId, approveOrderTobeType: "1", state: "1"}, true)
    approveOrderTobeList.value = res['records']
    console.log('approveOrderTobeList.value', res['records'])
  }

  getList()

  const returnBtn = () => {
    router.push({path: '/h5_home'})
  }

  const pproveOrderBtn = (id) => {
    router.push({path: '/h5_approval', query: {id: id}})
  }
  
  // function gotoLogin() {
  //   // showConfirmDialog
  //   useH5UserStore().logout().then(() => {
  //     router.push('/h5_login')
  //   })
  // }
  // showConfirmDialog({
  //   message:
  //     '确定注销并退出系统吗？',
  //   })
  //   .then(() => {
  //     useH5UserStore().logout().then(() => {
  //       location.href = '/h5_login';
  //     })
  //   })
  //   })
  //   .catch(() => {
  //     // on cancel
  //     console.log("cancel")
  // });
</script>
<style>
.custom-class {
  color: #F56C6C;
}
</style>
<style scoped lang="scss">
.home {
  // width: 100%;
  padding: 0 .9375rem;
  height: 100vh;
  overflow: hidden;
}
.home-head-per {
  width: 100%;
  overflow: hidden;
}
.van-highlight {
  margin-top: 1.25rem;
  line-height: 1.5rem;
}
.home-list {
  display: flex;
  align-items: center;
  & span {
    background: var(--van-primary-color);
    color: #fff;
    padding: .0625rem .3125rem;
    border-radius: 50%;
    display: inline-block;
    margin-right: .625rem;
  }
}
.home-head {
  width: 100%;
  height: 8rem;
  background: var(--van-primary-color);
  text-align: center;
  overflow: hidden;
  & span {
    display: inline-block;
    color: #fff;
    font-size: 1.25rem;
    margin-top: 1.25rem;
  }
}
.home-head-content {
  width: 80%;
  // height: 8rem;
  background: #fff;
  border-radius: 10px;
  position: absolute;
  left: 50%;
  top: 4rem;
  margin-left: -40%;
  box-shadow:0 0 12px var(--van-gray-5);
  padding: .625rem;
  .head-content-name {
    color: black;
    font-weight: 500;
    font-size: 1.2rem;
    & span {
      color: var(--van-gray-6);
    } 
  }
  .head-content-info {
    color: var(--van-gray-6);
    margin-top: .3125rem;
  }
}
.home-content-list {
  margin-top: 5.625rem;
  // width: 100%;
  // padding: 1.25rem 0;
  // margin-top: 5.625rem;
  // background: #fff;
  // display: flex;
  // align-items: center;
  // justify-content: center;
}
.home-content-list span {
  color: var(--van-primary-color);
}
.home-content-link {
  margin-top: 1.25rem;
}
.custom-title {
  padding-left: .9375rem;
  color: var(--van-primary-color);
  font-size: 1rem;
}
.home-content-link .van-cell {
  padding: 1.25rem .9375rem;
}
.danger-color {
  color: var(--van-danger-color);
}
.list-info {
  padding: .9375rem 0;
  text-align: center;
  background: #fff;
}

</style>

